<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item
      v-for="li in list"
    >
      <img :src="li.img" alt="">
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { 
  onMounted, 
  onUpdated, 
  reactive, 
  ref,
  watchEffect
} from 'vue'
import { Swipe, SwipeItem } from 'vant'

// import axios from 'axios'
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  // props: ['list'],

  components: {
    'van-swipe': Swipe,
    'van-swipe-item': SwipeItem
  },

  setup(props) {
    const store = useStore()
    // const list = ref([])

    // watchEffect(() => {
    //   list.value = props.list
    // })

    return {
      list: computed(() => store.state.list.slice(0, 5))
    }
  }
}
</script>

<style lang='stylus' scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
  }
}
</style>